<template>
  <div class="home-page">
    <van-tabs  @click="change" v-model="ChannelsId">
      <van-tab v-for="item in userChannels" :title="item.name" :name="item.id" :key="item.id" >
        <article-list :ChannelsId="ChannelsId"></article-list>
      </van-tab>
    </van-tabs>
    <div class="btn-wrapper">
      <geek-icon name="search" @click.native="toSearch"></geek-icon>
      <geek-icon name="channel" @click.native="editchannel"></geek-icon>
    </div>
    <van-popup v-model="show" position="left" :style="{ height: '100%',width:'100%' }"  closeable @close="isEdit = false">
       <div class="article-channel">
      <div class="head">
        <h3>我的频道<small>点击进入频道</small></h3>
        <a class="edit" href="javascript:;" @click="edit" v-if="!isEdit">编辑</a>
        <van-button type="primary" round v-else size="mini" color="#fc6627" @click="finish">完成</van-button>
      </div>
      <div class="body">
        <a href="javascript:;" v-for="i in userChannels" :class="{active:i.id===ChannelsId}" :key="i.id" @click="tochannel(i.id)">
          {{i.name}}
          <geek-icon name="tag-close" v-if="isEdit" @click.native.stop="delchannel(i.id)"></geek-icon>
        </a>
      </div>
      <div class="head" style="margin-top:12px">
        <h3>频道推荐</h3>
      </div>
      <div class="body">
        <a href="javascript:;" v-for="i in otherchannels" :key="i.id" @click="addchannel(i.id)">+ {{i.name}}</a>
      </div>
    </div>
    </van-popup>
  </div>
</template>
<script>
import geekIcon from '@/components/geek-icon.vue'
import ArticleList from '@/components/ArticleList.vue'
import { getUserChannels, getAllChannels, addChannel, delChannel } from '@/api/channels'
import to from 'await-to-js'
import { Toast } from 'vant'
export default {
  name: 'HomePage',
  data () {
    return {
      userChannels: [],
      channels: [],
      ChannelsId: 0,
      show: false,
      isEdit: false
    }
  },
  components: { geekIcon, ArticleList },
  computed: {
    otherchannels () {
      return this.channels.filter(item => !this.userChannels.find(obj => obj.id === item.id))
    }
  },
  async created () {
    const [, res] = await to(getUserChannels())
    this.userChannels = res.data.data.channels
  },
  methods: {
    change (name) {
      this.ChannelsId = name
    },
    toSearch () {
      this.$router.push('/search')
    },
    async editchannel () {
      this.show = true
      const [, res] = await to(getAllChannels())
      this.channels = res.data.data.channels
    },
    async addchannel (id) {
      const [err] = await to(addChannel({ channels: [{ id, seq: this.userChannels.length + 1 }] }))
      if (err) return Toast.fail('添加失败')
      Toast.success('添加成功')
      const [, res] = await to(getUserChannels())
      this.userChannels = res.data.data.channels
      const [, res2] = await to(getAllChannels())
      this.channels = res2.data.data.channels
    },
    async delchannel (target) {
      const [err, res] = await to(delChannel(target))
      console.log(err, res)
      if (err) return Toast.fail('删除失败')
      if (target === 0) return
      Toast.success('删除成功')
      const [, res1] = await to(getUserChannels())
      this.userChannels = res1.data.data.channels
      const [, res2] = await to(getAllChannels())
      this.channels = res2.data.data.channels
    },
    edit () {
      this.isEdit = true
    },
    finish () {
      this.isEdit = false
    },
    tochannel (id) {
      this.show = false
      this.ChannelsId = id
    }
  }
}
</script>
<style scoped lang="less">
::v-deep .van-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
  .van-tabs__line {
    height: 2px;
    width: 32px;
  }
  .van-tab {
    color: #9ea1ae;
  }
  .van-tab--active {
    font-size: 18px;
    color: #333;
  }
  .van-tabs__wrap {
    padding-right: 86px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  .van-tabs__content {
    flex: 1;
    overflow: hidden;
  }
  .van-tab__pane {
    height: 100%;
  }
}
.home-page {
  .btn-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    width: 86px;
    height: 44px;
    background: #fff;
    display: flex;
    align-items: center;
    .geek-icon {
      flex: 1;
      text-align: center;
      font-size: 18px;
    }
    &::before {
      content: "";
      width: 20px;
      height: 44px;
      position: absolute;
      left: -20px;
      top: 0;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
    }
  }
}
.article-channel {
  margin-top: 44px;
  .head {
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    justify-items: center;
    padding-bottom: 12px;
    h3 {
      font-size: 16px;
      color: #333;
      margin: 0;
      small {
        font-size: 12px;
        color: #999;
        margin-left: 10px;
      }
    }
    .edit,.van-button--mini  {
      float: right;
      height: 22px;
      width: 52px;
      line-height: 22px;
      text-align: center;
      color: #DE644B;
      border-radius: 11px;
      border: 1px solid #DE644B;
      font-size: 12px;
      &.active {
        color: #fff;
        background: #DE644B;
      }
    }
  }
  .body {
    padding: 0 6px 0 16px;
    a {
      display: inline-block;
      padding: 0 8px;
      font-size:14px;
      color: #3A3948;
      background: #F7F8FA;
      height: 36px;
      line-height: 36px;
      min-width: 78px;
      margin-right: 10px;
      margin-bottom: 12px;
      border-radius: 18px;
      text-align: center;
      &.active {
        color: @geek-color;
      }
    }
  }
}

</style>
